<template>
  <view class="product-page3">
    <!-- 分类标签 -->
    <view class="category-tabs">
      <nut-tabs
        v-model="activeTab"
        :ellipsis="false"
        title-scroll
        title-gutter="10"
        @change="onTab"
      >
        <nut-tab-pane
          :title="item.name"
          :pane-key="item.id"
          :key="item.id"
          v-for="(item, i) in cateList"
        ></nut-tab-pane>
        <!-- <nut-tab-pane title="白酒"></nut-tab-pane>
        <nut-tab-pane title="果酒"></nut-tab-pane>
        <nut-tab-pane title="礼盒"></nut-tab-pane> -->
      </nut-tabs>
    </view>

    <!-- 网格商品列表 -->
    <view class="product-grid">
      <view
        class="product-item"
        v-for="item in products"
        :key="item.id"
        @click="goToDetail(item.id)"
      >
        <items :item="item" />
      </view>
      <nexts :over="over" />
    </view>
    <empty v-if="products.length === 0" />
  </view>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import Taro from "@tarojs/taro";
const pic = "https://cdn.tjkximg.com/content/zhangtang/images/mtjx.jpg";
import myInput from "@/components/my-input/index.vue";
import http from "@/utils/http";
const searchTxt = ref("");
const params = Taro.getCurrentInstance().router?.params;
import empty from "@/components/empty/index.vue";
import nexts from "@/components/next/index.vue";
import items from "./component/items.vue";

const over = ref(true)

// import Empty from "@/components/empty/index.vue";
function handleSearch() {
  console.log("searchTxt", searchTxt.value);
}

Taro.setNavigationBarTitle({
  title: "订单",
});

interface Product {
  id: number;
  name: string;
  desc: string;
  price: number;
  sold: number;
  image: string;
}

const activeTab = ref(0);
const cateList = ref<any[]>([
  { name: "全部", id: '-1' },
  { name: "待付款", id: '0' },
  { name: "待收货", id: '1' },
  { name: "已完成", id: '2' },
  { name: "已取消", id: '4' },
]);

const onTab = (obj: any) => {
  console.log("index", obj, activeTab.value);

  getGoods();
};

Taro.usePullDownRefresh(() => {
  getGoods();
  setTimeout(() => {
    Taro.stopPullDownRefresh();
  }, 1200);
});

Taro.useReachBottom(() => {
  console.log("底部")
});

const products = ref<any[]>(
  [1, 2, 3, 4, 5, 6, 7, 8].map((i) => {
    return {
      // id: i,
      // name: `醉义堂20年窖藏酒商品${i}`,
      // desc: `商品${i}的描述纯粮酿醉义堂20年窖藏酒醉义堂20年窖藏酒香型白酒`,
      // price: Math.floor(Math.random() * 1000),
      // sold: Math.floor(Math.random() * 1000),
      // image: pic,
      id: i,
      title: "【1瓶/装】480M郎酒 白酒...",
      spec: "480M郎酒 1箱送1瓶",
      price: 99.0,
      quantity: 1,
      imageUrl: pic,
    };
  })
);
console.warn("products", products.value)

onMounted(() => {
  // http.post(`/api/mallIndex/goodsType`).then((res) => {
  //   console.log("res 商品类型", res);
  //   cateList.value = res.data.map((i) => i.columns);
  // });
  const params = Taro.getCurrentInstance().router?.params;
  activeTab.value = params.id;
  console.log("params 路由参数", params);
  if (params && params.id) {
    getGoods();
  }
});

function getGoods() {
  const typeId = activeTab.value;
  http
    .postQuery(`/api/mallIndex/getGoodsByType`, { typeId: typeId })
    .then((res) => {
      console.log("res 商品列表", res);
      // products.value = res.data.map((i) => i.columns);
      // products.value.forEach((item) => {
      //   item.image = item.imgsUrl.split(",").pop();
      // });
    });
}

function goToDetail(id: number) {
  Taro.navigateTo({
    url: `/pages-detail/detail/index?id=${id}`,
  });
}
</script>

<style lang="scss">
.product-page3 {
  padding-bottom: 200rpx;
  background: #f0f0f0;

  .search-bar {
    padding: 20rpx;
    background-color: #fff;
  }

  .category-tabs {
    background-color: #fff;
    margin-bottom: 20rpx;
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .product-grid {
    // display: flex;
    // flex-wrap: wrap;
    // padding: 0 10rpx;
    box-sizing: border-box;

    .product-item {
      width: 100%;
      box-sizing: border-box;
      position: relative;

      .product-image {
        width: 100%;
        height: 350rpx;
        border-radius: 16rpx 16rpx 0 0;
        background: #eee;
      }

      .product-info {
        background-color: #fff;
        padding: 20rpx;
        border-radius: 0 0 16rpx 16rpx;

        .product-title {
          font-size: 28rpx;
          font-weight: 500;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          line-height: 40rpx;
        }

        .product-desc {
          font-size: 24rpx;
          color: #999;
          margin: 10rpx 0;
          display: block;
          line-height: 34rpx;
        }

        .price-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 16rpx;

          .price {
            color: #f2270c;
            font-weight: 500;
            font-size: 32rpx;
          }

          .sold {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
    }
  }
  .acct {
    font-size: 24rpx;
    background: #008000;
    color: #fff;
    position: absolute;
    top: 8rpx;
    right: 8rpx;
    padding: 4rpx 10rpx;
    border-radius: 4rpx;
  }

  .nut-tab-pane {
    display: none;
  }
}
</style>
